"use client"

import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';

// 模拟数据 - 实际应用中应从API获取
const monthlyData = [
  { month: '1月', 送电: 12, 断电: 10 },
  { month: '2月', 送电: 15, 断电: 14 },
  { month: '3月', 送电: 18, 断电: 17 },
  { month: '4月', 送电: 22, 断电: 20 },
  { month: '5月', 送电: 25, 断电: 23 },
  { month: '6月', 送电: 20, 断电: 19 },
  { month: '7月', 送电: 18, 断电: 17 },
  { month: '8月', 送电: 22, 断电: 20 },
  { month: '9月', 送电: 28, 断电: 25 },
  { month: '10月', 送电: 26, 断电: 24 },
  { month: '11月', 送电: 24, 断电: 22 },
  { month: '12月', 送电: 22, 断电: 20 },
];

interface MonthlyTicketsChartProps {
  className?: string;
}

export function MonthlyTicketsChart({ className }: MonthlyTicketsChartProps) {
  return (
    <div className={`w-full h-full min-h-[300px] ${className}`}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={monthlyData}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis />
          <Tooltip 
            formatter={(value, name) => [`${value} 张`, name]}
            labelFormatter={(label) => `${label}统计`}
          />
          <Legend />
          <Line 
            type="monotone" 
            dataKey="送电" 
            stroke="#0062D6" 
            name="送电操作票"
            strokeWidth={2}
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
          <Line 
            type="monotone" 
            dataKey="断电" 
            stroke="#EF4444" 
            name="断电操作票"
            strokeWidth={2}
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export default MonthlyTicketsChart; 